<template>
	<div>
		<transition name="delay">
			<div class="mask" v-if="diolog" @click.stop="hide"></div>
		</transition>
		<transition name="slideup">
			<div class="mask-content"  v-if="diolog">
				<div class="mask-content-header">
					<img :src="url"/>
					<div class="mask-content-header-right">
						<div>
							<span>￥{{info.sortPrice?info.sortPrice*num: ''}}</span>
							<img src="../../static/img/icon/release_icon/close@2x.png" class="close" @click.stop="hide"/>
						</div>
						<div>
							库存{{info.inventory}}件
						</div>
						<div>
							{{list[0].attributeName}}：{{info.sortName}}
						</div>
					</div>
				</div>
				<div class="mask-content-type">
					<div class="mask-content-type-title">
						{{list[0].attributeName}}
					</div>
					<div class="mask-content-type-tag">
						<div :class="{'mask-content-type-tag-item': true, 'active': index==tagId}" @click.stop="option(index)" v-for="(item,index) in list">
							{{item.sortName}}
						</div>
					</div>
				</div>
				<div class="mask-content-num">
					<div class="mask-content-num-left">
						购买数量
					</div>
					<div class="mask-content-num-right">
						<div class="mask-content-num-reduce" @click.stop="reduce">
							-
						</div>
						<div class="mask-content-number">
							{{num}}
						</div>
						<div class="mask-content-num-plus" @click.stop="plus">
							+
						</div>
					</div>
				</div>
				<div class="mask-content-bottom">
					<div v-if="tagId != null" @click.stop="addShopping">加入购物车</div>
					<div :class="{'gray': tagId == null}" @click.stop="shop">立即购买</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		props:{
			diolog: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: ''
			},
			list: {
				type: [Array, Object],
				default: []
			}
		},
		data() {
			return {
				tag: [
					{
						name:'通用型',
						kuNum: 40,
						money: 50
					},
					{
						name:'兰花专用',
						kuNum: 60,
						money: 20
					},
					{
						name:'多肉专用',
						kuNum: 70,
						money: 10
					}
				],
				info: {},
				num: 1,
				tagId: null
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			option(index) {
				this.tagId = index
				this.num = 1
			},
			reduce() {
				if(this.num < 2) {
					this.num = 1
				} else {
					this.num--;					
				}
			},
			addShopping() {
				this.info.num = this.num
				this.$emit('addShopping', this.info)
				this.hide()
			},
			plus() {
				if(this.num < this.info.inventory) {					
					this.num++
				}
			},
			shop() {
				this.info.num = this.num
				this.$emit('shop', this.info)
				this.hide()
			}
		},
		watch: {
			tagId(val) {
				this.info = this.list[val]
			},
			diolog(val) {
				console.log(this.list)
				if(val) {
					this.tagId = 0
					this.info = this.list[0]
				}
			}
		},
	}
</script>

<style scoped lang="less">
	.slideup-enter-active{
        animation-name: slideInUp;
        animation-duration: .2s;
        animation-fill-mode: both
    }
    .slideup-leave-active {
        animation-name: slideOutDown;
        animation-duration: .5s;
        animation-fill-mode: both
    }
    @keyframes slideInUp {
        0% {
            transform: translate3d(0,100%,0);
            visibility: visible
        }

        to {
            transform: translateZ(0)
        }
    }
    @keyframes slideOutDown {
        0% {
            transform: translateZ(0)
        }

        to {
            visibility: hidden;
            transform: translate3d(0,100%,0)
        }
    }
    .delay-leave-active{
        /*-webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;*/
       	transition: opacity 0.5s;
        opacity: 0;
    }

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 101;
	}
	
	.mask-content {
		position: fixed;
		background: #fff;
		z-index: 102;
		bottom: 0;
		width: 100%;
		height: 280px;
		
		.mask-content-header {
			width: 100%;
			height: 100px;
			border-bottom: 1px solid #eee;
			position: relative;
			
			img {
				position: absolute;
				left: 20px;
				top: -20px;
				width: 100px;
				height: 100px;
				border-radius: 5px;
				box-shadow: 4px 7px 10px #fff;
			}
			
			.mask-content-header-right {
				float: right;
				width: 55%;
				padding: 10px;
				font-size: 12px;
				
				div {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10px;
					
					span {
						font-size: 14px;
						color: red;
						font-weight: bold;
					}
					
					.close {
						position: initial;
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		
		.mask-content-type {
			border-bottom: 1px solid #eee;
			padding: 10px;
			font-size: 12px;
			
			.mask-content-type-title {
				margin-bottom: 10px;
			}
			
			.mask-content-type-tag {
				display: flex;
				
				.mask-content-type-tag-item {
					padding: 5px 15px;
					margin-right: 5px;
					border-radius: 5px;
					background: #eee;
					color: #7b7b7b;
				}
				
				.active {
					background: #c9eb59;
					color: #fff;
				}
			}
		}
		
		.mask-content-num {
			border-bottom: 1px solid #eee;
			padding: 10px;
			display: flex;
			align-items: center;
			font-size: 12px;
			margin-bottom: 5px;
			justify-content: space-between;
							
			.mask-content-num-left {
				
			}
			
			.mask-content-num-right {
				display: flex;
				
				.mask-content-num-reduce {
					background: #eee;
					padding: 5px 10px;
					margin-right: 5px;
				}
				
				.mask-content-number {
					background: #eee;
					padding: 5px 15px;
					margin-right: 5px;
				}
				
				.mask-content-num-plus {
					background: #eee;
					padding: 5px 10px;
				}
			}
		}
		
		.mask-content-bottom {
			display: flex;
							
			div {
				width: 100%;
				/*height:50px;*/
				color: #fff;
				/*line-height: 50px;*/
				padding: 10px 0 ;
				text-align: center;
				
				&:first-child {
					background: gold;
				}
			
				&:last-child {
					background: #ff1747;
				}
			}
			
			.gray {
				color: #fff!important;
				background: #e5e5e5!important;
			}
		}
	}
</style>